<template>
	<!-- <scroll-view class="scroll-view_H" scroll-x="true"   scroll-left="0">
		 
		<view class="scroll-view-item_H  " v-for="(item, index) in list_" :key="index">
			<view class=" padding-sm" >
				<view class="padding radius text-center bg-cc" @click="onClick(item)">
		
					<view class="uni-h4">{{item.name+'/'+item.priceUnit}}</view>
					<view class=" text-Abc">
						<label :class="item.change > 0 ? 'uni-h3 uni-up' : 'uni-h3 uni-down' ">{{item.price}}</label>
					</view>
					<view class=" text-Abc">
						<label :class="item.change > 0 ? 'uni-h5 uni-up' : 'uni-h5 uni-down' ">{{item.change > 0 ? "+" : ""}}{{item.change}}%</label>
					</view>
					<view class=" text-Abc">
						<label class="uni-h5">≈{{item.cnyPrice}}CNY</label>
					</view>
					<view class=" text-Abc">
						<label class="uni-h5">≈{{item.usdPrice}}USD</label>
					</view>
				</view>
			</view>
		</view>
	</scroll-view> -->
	<block>
		<view class="uni-grid-9">
			<view v-for="(item, index) in list_" :key="index" class="uni-grid-9-item no-border-right recomment" @click="onClick(item)" v-if="index<3">
				<!-- <label class="uni-h4 text-bold">{{item.name+'/'+item.priceUnit}}</label> -->
				<text class="text-bold">{{item.name.toUpperCase()}}/USDT</text> 
				<label :class="item.change > 0 ? 'uni-h4 uni-up' : 'uni-h4 uni-down' ">{{item.price}}</label>
				<label :class="item.change > 0 ? 'uni-h7 uni-up' : 'uni-h7 uni-down' ">{{item.change > 0 ? "+" : ""}}{{item.change}}%</label>
				<!-- <label class="uni-h7" style="color: #9AA4AD;">￥{{item.cnyPrice}}CNY</label> -->
				<label class="uni-h7">≈{{item.usdPrice}}USD</label>
			</view>
		</view>
	</block>
</template>


<script>
	export default {
		data() {
			return {};
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		computed: {
			list_() {
				return this.list;
			}
		},
		methods: {
			onClick(item) {
				let data = {
					symbol: item.symbol,
					name: item.name,
					priceUnit: item.priceUnit,
					price: item.price
				}
				// uni.navigateTo({
				// 	url: `/pages/trade/kline/main?data=${JSON.stringify(data)}`
				// 	url: `/pages/market/kline?data=${JSON.stringify(data)}`, 
				// })
				uni.setStorageSync('market',data);
				// uni.switchTab({
				// 	url: `/pages/contract/main`
				// })
				uni.switchTab({
					// url: `/pages/trade/main`,
					url: `/pages/market/kline?data=${JSON.stringify(data)}`, 
				})
			},
			scroll: function(e) {
				console.log(e)

			},
		}
	}
</script>

<style scoped>
	.recomment .symbol {
		line-height: 40px;
	}

	.recomment .price {
		line-height: 30px;
	}

	.recomment .float {
		line-height: 30px;
	}

	.recomment .cny {
		line-height: 30px;
	}

	.uni-up {
		color: #44B297;
	}

	.bg-cc {
		background-color: #fffffe;
		color: #313131;
	}

	.panel-scroll-box {
		height: 100%;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}


	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 50%;
		/* height: 300rpx; */
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
		    padding: 5px;
	}
</style>
